<template>
	<view class="page">
		<!-- 基地名称 ——start -->
		<view class="head">
			<view class="title">
				<u-icon name="map-fill" color='#EE0000'></u-icon>
				<picker class="itemPicker" @change="baseChange" :value="baseIndex" :range="baseArray">
					<view class="uni-input">{{baseName}}</view>
				</picker>
			</view>
		</view>
		<!-- 基地名称 ——end -->
		<!-- 基地天气 ——start-->
		<view class="weather">
			<view class="iconfont icon-taiyang" style="color:#FFD700;margin-right: 10rpx;"></view>
			<text>晴，东北风，16°</text>
		</view>
		<!-- 基地天气 ——end-->
		<!-- 数据可视化图表 ——start -->
		<!-- 基地异常数据 ——start -->
		<view class="content" style="height: 500rpx;">
			<view class="head">
				<view class="title">
					<view class="iconfont icon-yichang" style="color: #EE4000;margin-right: 10rpx;"></view>
					<text style="height: 100%;">基地异常鸽笼</text>
				</view>
			</view>
			<view class="charts-box">
				<qiun-data-charts type="arcbar" :chartData="arcbarData" />
			</view>
		</view>
		<!-- 基地异常数据 ——end -->
		<!-- 基地生产情况 ——start-->
		<view class="content" style="height: 600rpx;">
			<view class="view_item">
				<view class="head">
					<view class="title">
						<view class="iconfont icon-shuju" style="color: #218868;margin-right: 10rpx;"></view>
						<text style="height: 100%;">基地生产情况</text>
					</view>
				</view>
				<view class="progress_circle">
					<view v-for="(item,index) in circleData" :key="index" :class="['progress_block','block_'+index]">
						<view class="name">{{item.series[0].name}}</view>
						<view class="value">{{item.series[0].value}}</view>
						<view class="charts-box arcbar" style="height: 180rpx;width: 60%;">
							<qiun-data-charts type="arcbar" :chartData="item" :canvasId="'four_a_'+index"
								:canvas2d="isCanvas2d" :resshow="delayload"
								:opts="{title:{name:item.series[0].precent,color:item.series[0].color,fontSize:15},subtitle:{name:'',color:'#666666',fontSize:12},extra:{arcbar:{backgroundColor:item.series[0].backgroundColor}}}" />
						</view>
						<view class="planet">
							<view class="planet_shadow"></view>
							<view class="crater1"></view>
							<view class="crater2"></view>
							<view class="crater3"></view>
							<view class="crater4"></view>
						</view>
						<view class="star" :class="['star'+index]"></view>
						<view class="star pink" :class="['star'+index]"></view>
						<view class="star blue" :class="['star'+index]"></view>
						<view class="star yellow" :class="['star'+index]"></view>
					</view>
				</view>
			</view>
		</view>
		<!-- 基地生产情况 ——end-->
		<view class="content">
			<view class="head">
				<view class="title">
					<u-icon name="share" color="#218868" size="20" bold></u-icon>
					<text style="height: 100%;">{{getAllTypeTitle}}产出比例</text>
				</view>
				<button class="btn" @click="cutThisYear()">查看{{getAllTypeTitle == '本年' ? '上个月': '本年'}}</button>
				<!-- <u-button type="primary" :plain="true" text="查看本年" :custom-style="uButtontyle"></u-button> -->
			</view>
			<view class="charts-box">
				<qiun-data-charts type="ring" :chartData="ringChartData" background="none" />
			</view>
		</view>
		<view class="content" style="height: 700rpx;margin-bottom: 30rpx;">
			<view class="head">
				<view class="title">
					<u-icon name="share" color="#218868" size="20" bold></u-icon>
					<text style="height: 100%;">本年销量走势</text>
				</view>
				<button class="btn">查看上一年</button>
				<!-- <u-button type="primary" :plain="true" text="查看本年" :custom-style="uButtontyle"></u-button> -->
			</view>
			<view class="charts-box" style="height: 500rpx">
				<qiun-data-charts type="line" :chartData="lineChartData" />
			</view>
		</view>
		<!-- 数据可视化图表——end -->
	</view>
</template>
<script>
	var baseListRes = [];
	var ringChartData = {
		categories: ["肉鸽", "光蛋", "鸽粪", "残鸽"],
		series: [{
			name: "上月产出比例",
			data: [{
					"name": "肉鸽",
					"value": 50
				},
				{
					"name": "光蛋",
					"value": 30
				},
				{
					"name": "鸽粪",
					"value": 20
				},
				{
					"name": "残鸽",
					"value": 18
				}
			]
		}],
		dataPointShapeType: '空心',
		ringWidth: 20
	}
	import {
		myRequest
	} from "../../../util/api.js"
	export default {
		name: 'baseDataShow',
		created() {
			this.id = uni.getStorageSync('id');
			this.baseName = uni.getStorageSync('baseName')
			console.log(this.id);
			console.log(this.baseName);
			this.getBaseList();
			// this.getAllTypeAmountOfYear()
			this.getAllProductionType()
		},
		data() {
			return {
				id: '',
				baseName: '',
				baseArray: [],
				baseIndex: 0,
				isYear: false,
				getAllTypeTitle: '上月',
				arcbarData: {
					series: [{
						"name": "异常率",
						"data": 0.2,
						"color": "#EE4000"
					}]
				},

				circleData: [{
						"series": [{
							"color": "#fff",
							"data": 0.224,
							"precent": "22.4%",
							"index": 0,
							"legendShape": "circle",
							"name": "成鸽",
							"pointShape": "circle",
							"show": true,
							"type": "arcbar",
							"value": "120",
							"backgroundColor": "#00AEF9"
						}]
					},
					{
						"series": [{
							"color": "#fff",
							"data": 0.3717,
							"precent": "37.17%",
							"index": 0,
							"legendShape": "circle",
							"name": "雏鸽",
							"pointShape": "circle",
							"show": true,
							"type": "arcbar",
							"value": "140",
							"backgroundColor": "#F55676"
						}]
					},
					{
						"series": [{
							"color": "#fff",
							"data": 0.0017,
							"precent": "0.17%",
							"index": 0,
							"legendShape": "circle",
							"name": "死病雏",
							"pointShape": "circle",
							"show": true,
							"type": "arcbar",
							"value": "10",
							"backgroundColor": "#FAB215"
						}]
					},
					{
						"series": [{
							"color": "#fff",
							"data": 0.6321,
							"precent": "63.21%",
							"index": 0,
							"legendShape": "circle",
							"name": "鸽蛋",
							"pointShape": "circle",
							"show": true,
							"type": "arcbar",
							"value": "160",
							"backgroundColor": "#2EC693"
						}]
					}
				],
				ringChartData: {
					categories: ["肉鸽", "光蛋", "鸽粪", "残鸽"],
					series: [{
						name: "上月产出比例",
						data: [{
								"name": "肉鸽",
								"value": 50
							},
							{
								"name": "光蛋",
								"value": 30
							},
							{
								"name": "鸽粪",
								"value": 20
							},
							{
								"name": "残鸽",
								"value": 18
							}
						]
					}],
					dataPointShapeType: '空心',
					ringWidth: 20
				},

				chartData: {
					categories: ["肉鸽", "光蛋", "鸽粪", "残鸽"],
					series: [{
						name: "上月产出比例",
						data: [35, 8, 25, 37]
					}]
				},
				lineChartData: {
					categories: [
						"1",
						"2",
						"3",
						"4",
						"5",
						"6",
						"7",
						"8",
						"9",
						"10",
						"11",
						"12",
					],
					series: [{
							name: "整体",
							// stack: '总量', //去除，否则数据差值较大时会出现异常
							data: [20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120, 130],
						},
						{
							name: "异常鸽",
							// stack: '总量', //去除，否则数据差值较大时会出现异常
							data: [0, 0, 0, 0, 0, 12, 0, 0, 0, 0, 0, 0],
						},
						{
							name: "残次品",
							// stack: '总量',
							data: [0, 0, 0, 0, 0, 30, 5, 0, 0, 0, 0, 0],
						},
						{
							name: "鸽蛋",
							// stack: '总量',
							data: [0, 0, 0, 0, 60, 40, 0, 70, 0, 0, 0, 0],
						},
						{
							name: "鸽粪",
							// stack: '总量',
							data: [0, 0, 0, 0, 80, 0, 0, 80, 0, 0, 0, 0],
						},
						{
							name: "肉鸽",
							// stack: '总量',
							data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
						}
					]
				}
			}
		},
		methods: {
			async getBaseList() {
				let option = {
					url: `http://39.99.247.58:9802/breed/Base/list/1/100`,
					header: {
						token: ''
					}
				}
				option.header.token = uni.getStorageSync('token')
				let res = await myRequest(option);
				console.log('基地列表', res)
				if (res.data.statusCode === 20000) {
					console.log('获取数据成功');
					baseListRes = res.data.data.records;
					// this.baseArray = ;
					res.data.data.records.forEach((item, index) => {
						this.baseArray.push(item.name);
					})
				}
			},
			baseChange(e) {
				// console.log('改变', e.detail.value);
				this.baseName = this.baseArray[e.detail.value];
				baseListRes.forEach((item, index) => {
					// console.log(this.baseName,'数据')
					if (item.name == this.baseName) {
						// console.log(item.name)
						this.id = item.id;
					}
				})
				uni.setStorageSync('id', this.id);
				uni.setStorageSync('baseName', this.baseName);
				// console.log('当前id',this.id)
			},

			async getAllProductionType() {
				let option = {
					url: 'http://39.99.247.58:9802/breed/shipmentOutBill/getAllTypeAmountOfMonth',
					data: null,
					header: {
						token: ''
					}
				}
				option.header.token = uni.getStorageSync('token');

				let d = new Date();
				let year = d.getFullYear();
				let mounth = d.getMonth() + 1;
				if (mounth === 1) {
					//若是1月的则要查看去年12月的数据
					year--;
					mounth = 12;
				}
				//实际上，但是现在没数据，所以先注释掉
				let body = {
					baseId: this.id,
					pageNum: 1,
					pageSize: 12,
					year: year
				}

				option.data = body;

				let res = await myRequest(option);
				console.log('结果', res)
				let chartData = null
				if (mounth === 1) {

					//此时在上面已经减去了
					chartData = res.data.data.records[mounth - 1];
					console.log(chartData)
				} else {
					chartData = res.data.data.records[mounth - 2];
				}
				console.log(chartData, 111)
				for (let i in chartData) {
					if (i === "meetDove") {
						ringChartData.series[0].data[0].value = chartData[i];
						continue;
					} else if (i === "abnormalDove") {
						ringChartData.series[0].data[3].value = chartData[i];
						continue;
					} else if (i === "doveEggs") {
						ringChartData.series[0].data[1].value = chartData[i];
						continue;
					} else if (i === "doveShit") {
						ringChartData.series[0].data[2].value = chartData[i];
						continue;
					}
				}
				this.ringChartData = ringChartData
				console.log(this.ringChartData, '数据')
				//参数

			},

			async getAllTypeAmountOfYear() {
				let option = {
					url: 'http://39.99.247.58:9802/breed/shipmentOutBill/getAllTypeAmountOfYear',
					data: null,
					header: {
						token: ''
					}
				}
				option.header.token = uni.getStorageSync('token');

				let d = new Date();
				let year = d.getFullYear();
				//实际上，但是现在没数据，所以先注释掉
				let body = {
					baseId: this.id,
					year: year
				}

				option.data = body;

				let res = await myRequest(option);
				console.log(res, '年数据')
				// this.chartData.series[0].name =""

				// this.chartData.series[0].data = [1,100,20,60]
				// console.log()


				this.ringChartData = {
					categories: ["肉鸽", "光蛋", "鸽粪", "残鸽"],
					series: [{
						name: "本年产出比例",
						data: [{
								"name": "肉鸽",
								"value": 100
							},
							{
								"name": "光蛋",
								"value": 10
							},
							{
								"name": "鸽粪",
								"value": 40
							},
							{
								"name": "残鸽",
								"value": 58
							}
						]
					}],
					dataPointShapeType: '空心',
					ringWidth: 20
				}
				console.log(this.chartData)

				//由于现在没数据
				// let chartData = res.data.data
				// console.log(chartData)
				// for (let i in chartData) {
				// 	if (i === "meetDove") {
				// 		ringChartData.series[0].data[0].value = chartData[i];
				// 		continue;
				// 	} else if (i === "abnormalDove") {
				// 		ringChartData.series[0].data[3].value = chartData[i];
				// 		continue;
				// 	} else if (i === "doveEggs") {
				// 		ringChartData.series[0].data[1].value = chartData[i];
				// 		continue;
				// 	} else if (i === "doveShit") {
				// 		ringChartData.series[0].data[2].value = chartData[i];
				// 		continue;
				// 	}
				// }
				// console.log(this.chartData,'数据')
				//参数
			},
			cutThisYear() {
				this.isYear = !this.isYear;
				if (this.isYear) {
					this.getAllTypeTitle = '本年'
					this.ringChartData = {}
					this.getAllTypeAmountOfYear()
				} else {
					this.getAllTypeTitle = '上月'
					this.ringChartData = {}
					this.getAllProductionType()
				}
			}

		}
	}
</script>
<style lang="scss" scoped>
	* {
		padding: 0;
		margin: 0;
		box-sizing: border-box;
	}

	.page {
		background-color: #F0F0F0;
		height: 100%;
		width: 100%;

		.head {
			display: flex;
			// background-color: #FFFFFF;
			height: 100rpx;
			padding-left: 20rpx;
			align-items: center;
			justify-content: center;
			font-size: 36rpx;
			font-weight: 700;
			line-height: 80rpx;

			.title {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 95%;
				text-align: center;

				.itemPicker {

					.uni-input {
						width: 98%;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}


				}
			}

		}

		.weather {
			height: 100rpx;
			margin: 10rpx 20rpx 0 20rpx;
			padding-left: 20rpx;
			background-color: #FFFFFF;
			border-radius: 15rpx;
			display: flex;
			font-size: 36rpx;
			font-weight: 700;
			line-height: 100rpx;
			letter-spacing: 2rpx;
		}

		.content {
			display: flex;
			flex-flow: column wrap;
			margin: 30rpx 20rpx 0 20rpx;
			padding: 10rpx;
			height: 500rpx;
			background-color: #FFFFFF;
			box-shadow: 0 0 8rpx rgba(0, 0.5, 0.5, 0.2);
			border-radius: 15rpx;

			.head {
				width: 100%;
				display: flex;
				justify-content: space-around;
				align-items: center;
				position: relative;

				.title {
					flex: 6;
					display: flex;
					height: 100rpx;
					padding: 20rpx;
					text-align: left;
					font-size: 36rpx;
					font-weight: 700;
					line-height: 60rpx;
					border-bottom: 2rpx solid #D9D9D9;
				}

				.btn {
					flex: 2;
					position: absolute;
					right: 20rpx;
					padding: 0 0 0 5rpx !important;
					width: 150rpx;
					font-size: 28rpx;
					font-weight: 500;
					letter-spacing: 3rpx;
					background-color: #23b8ff;
					color: #FFFFFF;
					// opacity: 0.8 //修改透明度

				}
			}

			.charts-box {
				padding-top: 30rpx;
				width: 650rpx;
				height: 380rpx;
			}

			.progress_circle {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-around;
				align-items: center;
				height: 450rpx;

				.progress_block {
					width: 45%;
					border-radius: 20rpx;
					height: 180rpx;
					position: relative;
					overflow: hidden;

					.name {
						color: #fff;
						font-size: 24rpx;
						position: absolute;
						top: 20rpx;
						left: 10rpx;
						max-width: 144rpx;
					}

					.value {
						color: #fff;
						font-size: 40rpx;
						position: absolute;
						top: 64rpx;
						left: 10rpx;
						max-width: 144rpx;
					}

					.circle {
						position: absolute;
						right: 8rpx;
						top: 16rpx;
					}

					.arcbar {
						position: absolute;
						right: -4rpx;
						top: 8rpx;
					}
				}

				.block_0 {
					background-color: #0FC3FF;
				}

				.block_1 {
					background-color: #FF6B8B;
				}

				.block_2 {
					background-color: #FFCB1D;
				}

				.block_3 {
					background-color: #3BDCAA;
				}
			}
		}
	}
</style>
